class Particle {
  x: number
  y: number
  vx: number // X轴速度
  vy: number // Y轴速度
  radius: number
  color: string
  canvas: HTMLCanvasElement

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas
    this.radius = Math.random() * 3 + 1 // 1-4px随机大小
    this.x = Math.random() * canvas.width
    this.y = Math.random() * canvas.height

    // 随机速度（-0.5到0.5之间）
    this.vx = Math.random() - 0.5
    this.vy = Math.random() - 0.5

    // 随机浅色粒子
    // const hue = Math.floor(Math.random() * 60) + 180 // 180-240蓝色系
    // this.color = `hsla(${hue}, 70%, 70%, 0.8)`
    // this.color = 'rgb(200,200,200)'
    // 随机彩虹色
    const hue = Math.floor(Math.random() * 360)
    this.color = `hsla(${hue}, 85%, 65%, 0.9)`
  }

  // 更新粒子位置
  update() {
    // 添加随机扰动
    this.vx += (Math.random() - 0.5) * 0.1
    this.vy += (Math.random() - 0.5) * 0.1

    // 限制最大速度
    const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy)
    if (speed > 1) {
      this.vx = (this.vx / speed) * 1
      this.vy = (this.vy / speed) * 1
    }

    // 更新位置
    this.x += this.vx
    this.y += this.vy
    // // 确保粒子在画布内
    // this.x = Math.max(this.radius, Math.min(this.canvas.width - this.radius, this.x))
    // this.y = Math.max(this.radius, Math.min(this.canvas.height - this.radius, this.y))
    // // 边界反弹
    if (this.x < 0 || this.x > this.canvas.width)
      this.vx *= -1
    if (this.y < 0 || this.y > this.canvas.height)
      this.vy *= -1
  }

  // 绘制粒子
  draw(ctx: CanvasRenderingContext2D) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
    ctx.fillStyle = this.color
    ctx.fill()
  }
}

export class ParticleSystem {
  particles: Particle[] = []
  ctx: CanvasRenderingContext2D
  canvas: HTMLCanvasElement
  maxDistance: number = 500 // 最大连线距离
  private animationFrameId: number | null = null

  constructor(canvasId: string, particleCount: number = 50) {
    this.canvas = document.getElementById(canvasId) as HTMLCanvasElement
    this.ctx = this.canvas.getContext('2d')!

    // 设置画布尺寸
    this.resizeCanvas()
    window.addEventListener('resize', () => this.resizeCanvas())

    // 初始化粒子
    for (let i = 0; i < particleCount; i++) {
      this.particles.push(new Particle(this.canvas))
    }

    // 开始动画
    this.animate()
  }

  resizeCanvas() {
    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight
  }

  // 绘制粒子间的连线
  drawConnections() {
    for (let i = 0; i < this.particles.length; i++) {
      for (let j = i + 1; j < this.particles.length; j++) {
        const p1 = this.particles[i]
        const p2 = this.particles[j]

        // 计算距离
        const dx = p1.x - p2.x
        const dy = p1.y - p2.y
        const distance = Math.sqrt(dx * dx + dy * dy)
        // 在最大距离内才绘制连线,超过距离跳过循环
        if (distance > this.maxDistance)
          continue

        // 计算连线强度（距离越近强度越大）
        const strength = 1 - distance / this.maxDistance

        this.ctx.beginPath()
        this.ctx.moveTo(p1.x, p1.y)
        this.ctx.lineTo(p2.x, p2.y)

        // 设置连线样式（距离越近越明显）
        // this.ctx.strokeStyle = `rgba(100, 180, 255, ${strength * 0.6})`
        this.ctx.strokeStyle = `rgba(200, 200, 200, ${strength * 0.6})`
        this.ctx.lineWidth = strength * 1.5 // 线宽0-1.5px
        this.ctx.stroke()
      }
    }
  }

  // 动画循环
  animate() {
    // 清空画布（使用半透明填充实现拖尾效果）
    this.ctx.fillStyle = 'rgba(10, 15, 30, 0.1)'
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)

    // 更新并绘制所有粒子
    this.particles.forEach((particle) => {
      particle.update()
      particle.draw(this.ctx)
    })

    // 绘制连线
    this.drawConnections()

    // 继续动画 使用变量存储 requestAnimationFrame 的 ID
    this.animationFrameId = requestAnimationFrame(() => this.animate())
  }

  // 添加停止方法
  stop() {
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId)
      this.animationFrameId = null
    }
  }
}
